<template>
  <div
    class="dashboard"
    v-loading="loading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(255, 255, 255, 0.9)"
    element-loading-svg-view-box="-10, -10, 50, 50"
    :element-loading-svg="svg"
  >
    <div class="dashboard-top">
      <div class="dashboard-info">
        <div class="info-title">
          <div class="title-line">督办工单数</div>
        </div>
        <div class="info-content">
          <div class="info-left">
            <div class="chart-title">最近12个月督办工单趋势</div>
            <div class="item-content">
              <LineBar :xAxisData="barXData" :seriesData="barSeriesData" />
            </div>
          </div>
          <div class="info-right">
            <div class="chart-title">单位分布</div>
            <div class="item-content">
              <div class="list-item" v-for="(item, index) in list" :key="index">
                <div class="item-no">{{ index + 1 }}</div>
                <div class="item-info">{{ item.departmentNmae }}</div>
                <div class="item-num">{{ item.ordersCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-bottom">
      <div class="bottom-left">
        <Card title="本月督办工单趋势">
          <div class="chart-title">
            <div class="title-item">
              <p>本月总工单数</p>
              <span>{{ MonthAndDayWorkOrders.month_count }}个</span>
            </div>
            <div class="title-item">
              <p>本月每日平均工单数</p>
              <span>{{ MonthAndDayWorkOrders.day_count }}个</span>
            </div>
          </div>
          <div class="chart">
            <LineBar :xAxisData="lineXData" :seriesData="lineSeriesData" />
          </div>
        </Card>
      </div>
      <div class="bottom-right">
        <Card title="本月工单分类">
          <el-radio-group
            v-model="type"
            style="margin-top: 10px"
            @change="changeType"
          >
            <el-radio-button label="所有类别" value="所有类别" />
            <el-radio-button label="督办" value="督办" />
            <el-radio-button label="已阅" value="已阅" />
          </el-radio-group>
          <div class="chart">
            <PieComponent :seriesData="pieSeriesData" />
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import Card from "@/components/Card/index.vue";
import LineBar from "@/components/echarts/lineBar.vue";
import PieComponent from "@/components/echarts/pie1.vue";
import {
  getDepartmentOrdersCount,
  getDayWorkOrdersCountListByIdc,
  getMonthAndDayWorkOrdersCountByIdc,
  getWorkOrdersCountListByLevel1,
  getWorkOrdersMonthCountByIdc,
} from "./services";

const type = ref("所有类别");
const loading = ref(false);
// 自定义loading图标
const svg = `
  <path class="path" d="
    M 30 15
    L 28 17
    M 25.61 25.61
    A 15 15, 0, 0, 1, 15 30
    A 15 15, 0, 1, 1, 27.99 7.5
    L 15 15
  " style="stroke-width: 4px; fill: none"/>
`;
const lineXData = ref([]);
const lineSeriesData = ref([
  {
    name: "工单数",
    type: "line",
    stack: "Total",
    smooth: true,
    symbol: "none",
    data: [],
  },
]);
const barXData = ref([]);
const barSeriesData = ref([
  {
    name: "督办工单数",
    type: "bar",
    data: [],
  },
]);
const list = ref([]);

const MonthAndDayWorkOrders = ref({
  month_count: 0,
  day_count: 0,
});
const pieSeriesData = ref([]);
const fetchData = async () => {
  loading.value = true;
  loading.value = false;
};

const changeType = (val) => {
  type.value = val;
  request_getWorkOrdersCountListByLevel1();
};
onMounted(() => {
  fetchData();
  request_getDepartmentOrdersCount();
  request_getDayWorkOrdersCountListByIdc();
  request_getMonthAndDayWorkOrdersCountByIdc();
  request_getWorkOrdersCountListByLevel1();
  request_getWorkOrdersMonthCountByIdc();
});

// 获取单位分布
const request_getDepartmentOrdersCount = async () => {
  try {
    const res = await getDepartmentOrdersCount();
    list.value = res.data;
  } catch (error) {}
};

// 统计本月每日的督办工单数
const request_getDayWorkOrdersCountListByIdc = async () => {
  try {
    const res = await getDayWorkOrdersCountListByIdc();
    if (Array.isArray(res.data)) {
      lineXData.value = res.data.map((item) => item.date);

      lineSeriesData.value[0].data = res.data.map((item) => item.count);
    }
  } catch (error) {}
};

// 督办概览-统计本月和平均每日的督办工单数
const request_getMonthAndDayWorkOrdersCountByIdc = async () => {
  try {
    const res = await getMonthAndDayWorkOrdersCountByIdc();
    MonthAndDayWorkOrders.value = res.data;
  } catch (error) {}
};

// 督办概览-本月工单分类
const request_getWorkOrdersCountListByLevel1 = async () => {
  try {
    const res = await getWorkOrdersCountListByLevel1({ type: type.value });
    if (Array.isArray(res.data)) {
      pieSeriesData.value = res.data.map((item) => ({
        name: item.type,
        value: item.ordersCount,
      }));
    }
  } catch (error) {}
};

// 查询每个月的督办工单的统计图
const request_getWorkOrdersMonthCountByIdc = async () => {
  try {
    const res = await getWorkOrdersMonthCountByIdc();
    if (Array.isArray(res.data)) {
      barXData.value = res.data.map((item) => item.month);
      barSeriesData.value[0].data = res.data.map((item) => item.order_count);
    }
  } catch (error) {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
